<template>
	<div>
		<el-form ref="form" :model="form" class="madp-form-group" label-width="140px">
			<el-form-item label="分行:" v-if="curLevel <= 1">
				<el-select v-model="form.deptId0" @change="changeId(0)" clearable>
					<el-option v-for="item in list0" :key="item.objectId" :label="item.objectName" :value="item.objectId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="支行:" v-if="curLevel <= 2">
				<el-select v-model="form.deptId1" @change="changeId(1)" clearable>
					<el-option v-for="item in list1" :key="item.objectId" :label="item.objectName" :value="item.objectId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="请选择员工:" prop="member">
				<el-select v-model="form.deptId2" clearable>
					<el-option v-for="item in list2" :key="item.objectId" :label="item.objectName" :value="item.objectId"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="选择时间:" prop="date">
				<el-date-picker
					v-model="form.time"
					type="daterange"
					value-format="yyyy-MM-dd"
					:picker-options="pickerOptions"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
			</el-form-item>
		</el-form>
		<div class="madp-tar">
			<el-button type="primary" @click="handleSearch">查询</el-button>
		</div>
	</div>
</template>
<script>
import { deptCascade } from '@/api/operation-manage/group-records';
import { mapState } from 'vuex';
export default {
	props: ['msgType'],
	data() {
		return {
			keyArr: ['deptId0', 'deptId1', 'deptId2'],
			listArr: ['list0', 'list1', 'list2'],
			curDeptId: '',
			curLevel: 4,
			list0: [],
			list1: [],
			list2: [],
			form: {
				deptId0: '',
				deptId1: '',
				deptId2: '',
				time: [],
			},
			subForm: {
				dept: [],
				employee: [],
				endTime: '',
				startTime: '',
			},
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
			},
		};
	},
	computed: {
		...mapState({
			userInfo: (state) => state.user.userInfo,
		}),
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.curDeptId = this.userInfo.deptId;
			deptCascade(this.curDeptId).then((res) => {
				if (res.data.code != 0) return;
				this.curLevel = res.data.data.currentLogUserDeptLevel;
				this[this.listArr[this.curLevel]] = res.data.data.linkObjects;
			});
			let obj = {
				msgType: this.msgType,
				dept: this.curDeptId,
			};
			this.$emit('handleSearch', obj);
		},
		handleSearch() {
			this.subForm = {
				dept: [],
				employee: [],
				endTime: '',
				startTime: '',
				msgType: this.msgType,
			};
			if (this.form.time && this.form.time.length > 0) {
				this.subForm.startTime = this.form.time[0];
				this.subForm.endTime = this.form.time[1];
			} else {
				delete this.subForm.startTime;
				delete this.subForm.endTime;
			}
			if (this.form.deptId2) {
				this.subForm.employee = [this.form.deptId2];
				delete this.subForm.dept;
			} else if (this.form.deptId1) {
				this.subForm.dept = [this.form.deptId1];
				delete this.subForm.employee;
			} else if (this.form.deptId0) {
				this.subForm.dept = [this.form.deptId0];
				delete this.subForm.employee;
			} else {
				this.subForm.dept = this.curDeptId;
				delete this.subForm.employee;
			}
			this.$emit('handleSearch', this.subForm);
		},
		changeId(index) {
			if (index == 0) {
				this.list1 = [];
				this.list2 = [];
				this.form.deptId1 = '';
				this.form.deptId2 = '';
			} else {
				this.list2 = [];
				this.form.deptId2 = '';
			}
			this.getList(index);
		},
		getList(index) {
			if (this.form[this.keyArr[index]] == '') return;
			let deptId = this.form[this.keyArr[index]];
			deptCascade(deptId).then((res) => {
				if (res.data.code != 0) return;
				this[this.listArr[index + 1]] = res.data.data.linkObjects;
			});
		},
	},
};
</script>
<style scoped lang="scss">
.madp-form-group {
	display: flex;
	flex-wrap: wrap;
}
</style>
